<div class="content__title">
    <h1>
        Colors
        <small>Color Palettes</small>
    </h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card nzTitle="Classic colors">
            <div nz-row *ngFor="let c of colorSrv.brands">
                <div nz-col [nzSpan]="8">
                    <div class="bg-{{c}}-light p-lg">.bg-{{c}}-light<br>.text-{{c}}-light</div>
                </div>
                <div nz-col [nzSpan]="8">
                    <div class="bg-{{c}} p-lg">.bg-{{c}}<br>.text-{{c}}</div>
                </div>
                <div nz-col [nzSpan]="8">
                    <div class="bg-{{c}}-dark p-lg">.bg-{{c}}-dark<br>.text-{{c}}-dark</div>
                </div>
            </div>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card nzTitle="Name colors">
            <div nz-row *ngFor="let c of colors">
                <div nz-col [nzSpan]="8">
                    <div class="bg-{{c}}-light p-lg">.bg-{{c}}-light<br>.text-{{c}}-light</div>
                </div>
                <div nz-col [nzSpan]="8">
                    <div class="bg-{{c}} p-lg">.bg-{{c}}<br>.text-{{c}}</div>
                </div>
                <div nz-col [nzSpan]="8">
                    <div class="bg-{{c}}-dark p-lg">.bg-{{c}}-dark<br>.text-{{c}}-dark</div>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="5">
                    <div class="bg-grey-darker p-lg">.bg-grey-darker<br>.color-grey-darker</div>
                </div>
                <div nz-col [nzSpan]="5">
                    <div class="bg-grey-dark p-lg">.bg-grey-dark<br>.color-grey-dark</div>
                </div>
                <div nz-col [nzSpan]="4">
                    <div class="bg-grey p-lg">.bg-grey<br>.color-grey</div>
                </div>
                <div nz-col [nzSpan]="5">
                    <div class="bg-grey-light p-lg">.bg-grey-light<br>.color-grey-light</div>
                </div>
                <div nz-col [nzSpan]="5">
                    <div class="bg-grey-lighter p-lg">.bg-grey-lighter<br>.color-grey-lighter</div>
                </div>
            </div>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card nzTitle="Full Colors">
            <div nz-row>
                <div nz-col [nzSpan]="4" *ngFor="let c of colorSrv.names">
                    <div *ngFor="let i of nums" class="bg-{{c}}-{{i}} p-lg">
                        .bg-{{c}}-{{i}}<br>
                        .bg-{{c}}-{{i}}-h<br>
                        .text-{{c}}-{{i}}<br>
                    </div>
                </div>
            </div>
        </nz-card>
    </div>
</div>
